<template>
  <div class="guapaiDialog">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<button :class="active_1 ? 'active' : 'btns'" @click="guapai">挂牌</button>
			<button :class="active_2 ? 'active' : 'btns'" @click="zhaipai">摘牌</button>
				<div class="ctn">
					<div class="info">
						<h3>测点信息</h3>
						<ul>
							<li>
								<label>厂站：</label>
								<el-input v-model="newcurrentSelectMenuItemObj.guapaiObj.factory" size="small" disabled></el-input>
							</li>
							<li>
								<label>名称：</label>
								<el-input v-model="newcurrentSelectMenuItemObj.deviceName" size="small" disabled></el-input>
							</li>
						</ul>
					</div>
					<div class="paiList">
						<h3>排列表</h3>
						<el-transfer v-model="targetData" :data="computedOriginData" @change="saveItem"
												 :titles="['备选牌', '已挂牌']"></el-transfer>
					</div>
				</div>

			<!-- <el-tab-pane label="设置" name="second">设置</el-tab-pane> -->
		</el-tabs>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "guapaiDialog",
  props: ['currentSelectMenuItemObj'],
  data() {
    return {
			newcurrentSelectMenuItemObj: this.currentSelectMenuItemObj,
			activeName: 'first',
			// 穿梭框
			originData: [
				{key:1, label:'禁止合闸，有人工作!'},
				{key:2, label:'禁止合闸，线路有人工作!'},
				{key:3, label:'禁止分闸，在此工作!'},
				{key:4, label:'止步，高压危险!'},
				{key:5, label:'从此上下!'},
				{key:6, label:'从此进出!'},
				{key:7, label:'禁止攀登，高压危险!'},
			],
			targetData: [],
			type:undefined,
			active_1:false,
			active_2:false,
			isLeftDisabled:false,
			isRightDisabled:false,
    };
  },
  methods: {
		guapai(){
			this.type='guapai';
			this.isLeftDisabled=false;
			this.isRightDisabled=true;
			this.$store.commit('handleBrand',this.type)
			this.$message.success('当前为挂牌')
			this.active_1=true;
			this.active_2=false;
		},
		zhaipai(){
			this.type='zhaipai'
			this.isLeftDisabled=true;
			this.isRightDisabled=false;
			this.$store.commit('handleBrand',this.type)
			this.$message.success('当前为摘牌')
			this.active_1=false;
			this.active_2=true;
		},
    handleClick(tab){
			this.activeName = tab.name
		},
		saveItem(e){
			const brandKey=new Set(e);
			const brandInfo=[];
			this.originData.forEach(item=>{
				if (brandKey.has(item.key)){
					brandInfo.push(item.label)
				}
			})

			this.$store.commit('brandInfo',brandInfo.join(';'))
			console.log(this.$store.state.brandInfo)
		},
		updateTargetData() {
			// 清空 targetData 并重新计算
			this.targetData = [];
			const brandVal = new Set(this.newcurrentSelectMenuItemObj.brandInfo.split(';'));

			// 使用computedOriginData来计算targetData
			this.computedOriginData.forEach(item => {
				if (brandVal.has(item.label)) {
					item.disabled=this.handleBrand!=='zhaipai';
					this.targetData.push(item.key);
				}
			});
		}
  },
  mounted() {
  },
	computed: {
		handleBrand() {
			return this.$store.state.handleBrand;  // 从 Vuex 获取 handleBrand
		},
		computedOriginData() {
			// 根据 handleBrand 动态处理 originData 数据
			return this.originData.map(item => ({
				...item,
				disabled: this.handleBrand !== 'guapai'  // 根据 handleBrand 判断禁用状态
			}));
		},
	},
	watch: {
		handleBrand(newVal) {
			// 当 handleBrand 改变时执行
			this.updateTargetData();
		},
		currentSelectMenuItemObj: {
			handler(newValue) {
				this.targetData = [];
				this.newcurrentSelectMenuItemObj = newValue;
				this.$store.commit('brandInfo', this.newcurrentSelectMenuItemObj.brandInfo);
				this.$store.commit('brandInfoCopy', this.newcurrentSelectMenuItemObj.brandInfo);
				this.$store.commit('handleBrand', '');
				this.updateTargetData();
				this.active_1 = false;
				this.active_2 = false;
			},
			deep: true,
			immediate: true
		}
	}
};
</script>

<style lang="less" scoped>
	.guapaiDialog{

		height: 100%;
		overflow: scroll;
		/deep/ .el-tabs{
			height: 100%;
			overflow: hidden;
			display: flex;
			flex-direction: column;

		}
		/deep/ .el-tabs__header{
			.el-tabs__nav-wrap{
				&::after{
					height: 0;
				}
				.el-tabs__active-bar{
					height: 0;
				}
				.el-tabs__item{
					color: #999;
					width: 120px;
					padding: 0;
					text-align: center;
					background: linear-gradient(#142e48,#3a6378);
					margin-right: 20px;
					&.is-active{
						color: #fff;
					}
				}
			}
		}
		/deep/ .el-tabs__content{
			flex:1;
			overflow: hidden;
			padding: 20px 10px;
			color:#dee2e5;
			border: 1px solid #656a73;
			.el-tab-pane{
				height: 100%;
			}
		}
		/deep/ .ctn{
			display: flex;
			flex-direction: column;
			& > div + div{
				margin-top: 20px;
			}
			.info{
				display: flex;
				flex-direction: column;
				& > h3{
					font-size: 14px;
					font-weight: 600;
					margin-bottom: 10px;
				}
				& > ul{
					display: flex;
					align-items: center;
					& > li + li{
						margin-left: 10px;
					}
					& > li{
						display: flex;
						align-items: center;
						flex:1;
						overflow: hidden;
						& > label{
							font-size: 14px;
							width: 60px;
							text-align: right;
						}
						.el-input{
							flex:1;
							overflow: hidden;
							font-size: 14px;
							.el-input__inner{
								background:transparent;
								border: 1px solid #666;
							}
						}
					}
				}
			}
			.paiList{
				& > h3{
					font-size: 14px;
					font-weight: 600;
					margin-bottom: 10px;
				}
				.el-transfer{
					display: flex;
					align-items: center;
					justify-content: center;
					.el-transfer__buttons{
						.el-button{
							margin-left: 0;
						}
					}
					.el-transfer-panel{
						background:transparent;
						width: 350px;
						border: 1px solid #666;
						.el-transfer-panel__header{
							border-bottom: 1px solid #666;
							background:transparent;
							color: #dee2e5;
							.el-checkbox__label{
								color: #dee2e5;
							}
						}
						.el-transfer-panel__item{
							.el-checkbox__label{
								color: #dee2e5;
							}
						}
						.el-checkbox__input.is-checked+.el-checkbox__label{
							color: #409EFF;
						}
					}
				}
			}
		}
	}
	.btns{
		display: inline-block;
		width: 120px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 4px;
		background: linear-gradient(#142e48,#3a6378);
		color: #fff;
		margin-right: 20px;
		cursor: pointer;
	}
	.active{
		//闪烁
		animation: flash 1s infinite;
		display: inline-block;
		width: 120px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 4px;
		background: linear-gradient(#142e48,#3a6378);
		color: #fff;
		margin-right: 20px;
		cursor: pointer;
	}

	@keyframes flash {
		0%, 100% {
			opacity: 1; /* 完全不透明 */
		}
		50% {
			opacity: 0.5; /* 半透明 */
		}
	}

</style>
